<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['close'])
const show = ref(false)
defineExpose({
  show,
})

const editRef = ref()
const formModel = ref({
  sb_list: 886782193,
  mbs1: 0,
  mbs2: 0,
  pay_total: 0,
  pays: '304.60',
  sb_onTime: '2025-01-09 07:48:21',
  tb_tota: 0,
  tbs1: 0,
  tbs2: 0,
  zcs1: 0,
  zcs2: 0,
})

function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      // 提交表单逻辑
      emit('close', false)
      show.value = false
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleClose() {
//   show.value = false

}
const mcWidth = ref(0)
const nonc = ref(0)
const mcType = ref(0)
const netType = ref(0)
</script>

<template>
  <wd-popup v-model="show" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: 950rpx;overflow: hidden;border-radius:32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      【 设备ID: 17900016＞硬件配置 】
    </view>
    <view class="list">
      <view class="l-item">
        <view class="i-title">
          脉冲宽度配置
        </view>
        <view class="i-row">
          <view>脉冲宽度：</view>
          <wd-input-number v-model="mcWidth" input-width="70px" :step="5" custom-class="inp-num" />
          <view class="unit">
            单位: ms(毫秒)
          </view>
        </view>
      </view>
      <view class="l-item">
        <view class="i-title">
          脉冲方式 配置（单选）：
        </view>
        <wd-radio-group v-model="nonc" shape="dot" inline>
          <wd-radio value="1">
            常开
          </wd-radio>
          <wd-radio value="2">
            常闭
          </wd-radio>
        </wd-radio-group>
      </view>
      <view class="l-item">
        <view class="i-title">
          上币输出方式 配置（单选）
        </view>
        <wd-radio-group v-model="mcType" shape="dot" inline>
          <wd-radio value="1">
            脉冲输出
          </wd-radio>
          <wd-radio value="2">
            串口输出
          </wd-radio>
          <wd-radio value="3">
            脉冲 + 串口
          </wd-radio>
        </wd-radio-group>
      </view>
      <view class="l-item">
        <view class="i-title">
          上网方式 配置（单选）
        </view>
        <wd-radio-group v-model="netType" shape="dot" inline>
          <wd-radio value="1">
            WIFI 优先
          </wd-radio>
          <wd-radio value="2">
            4G 优先
          </wd-radio>
        </wd-radio-group>
      </view>
    </view>
    <view class="btn-outer-pd">
      <wd-button type="primary" size="small" block @click="handleSubmit">
        提交
      </wd-button>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.settings{
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    background-color: $uni-color-primary;
    width: 100%;
    line-height: 62rpx;
    text-align: center;
    margin: 0 auto 30rpx;
    border-radius: 6rpx;
}
.content{
    padding: 30rpx 30rpx 0;
    margin: 0 30rpx 20rpx;
    border: 1px solid #ececec;
    border-radius: 6rpx;
}
.wd-form{
    padding: 20rpx 40rpx 0;
}
.wd-input.is-cell{
    padding-top: 0;
}
.list{
  padding: 40rpx;
  .l-item {
    padding: 20rpx;
    border: 1px solid #ececec;
    border-radius: 6rpx;
    margin-bottom: 20rpx;
    .i-title {
      font-size: 28rpx;
      color: #5b5b5b;
      margin-bottom: 20rpx;
      font-weight: bold;
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 12px;
        border-radius: 2px;
        background-color: #3287e1;
        margin-right: 0.3125rem;
      }
    }
    .i-row {
      display: flex;
      align-items: center;
      .inp-num{
        margin: 0 10rpx;
      }
      .unit {
        color:red;
      }
    }
  }
}
</style>
